import React, { Component } from 'react'
import Taro from '@tarojs/taro'
import { View, Button, Canvas } from '@tarojs/components'
import { observer, inject } from 'mobx-react'

import lottie from 'lottie-miniprogram'

import { Parser, Player } from '@/libs/svgaplayer.weapp'

import './index.less'


@inject('store')
@observer
class Index extends Component {
  componentWillMount () { }

  componentDidMount () {
    Taro.nextTick(() => {
      this.initLottie()
    });
  }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  playSVGA = async () => {
    try {
      const parser = new Parser();
      const player = new Player;
      await player.setCanvas('#demoCanvas')
      const videoItem = await parser.load("https://cdn.jsdelivr.net/gh/svga/SVGA-Samples@master/angel.svga");
      await player.setVideoItem(videoItem);
      player.startAnimation();
    } catch (error) {
      console.log(error);
    }
    //
    try {
      const parser = new Parser();
      const player = new Player;
      await player.setCanvas('#demoCanvas2')
      const videoItem = await parser.load("https://cdn.jsdelivr.net/gh/svga/SVGA-Samples@master/kingset.svga");
      await player.setImage('https://aimg.yidoutang.com/upload/user/201910/8f/201910090957848f.jpg', '99');
      player.setText({
        text: 'Pony send Kitty flowers.',
        size: 28,
        color: "white",
        offset: {y: 10}
      }, 'banner');
      await player.setVideoItem(videoItem);
      player.startAnimation();
    } catch (error) {
      console.log(error);
    }
  }

  initLottie = () => {
    wx.createSelectorQuery().selectAll('#c1').node(res => {
      const canvas = res[0].node
      const context = canvas.getContext('2d')

      canvas.width = 300
      canvas.height = 300

      lottie.setup(canvas)
      this.ani = lottie.loadAnimation({
        loop: true,
        autoplay: true,
        // animationData: require('./catrim.js'),
        animationData: require('./test/a.js'),
        // path: 'https://dpc.way-s.cn/admin/test/static/images/weixin/test/test.json',
        // path: 'https://dpc.way-s.cn/admin/test/static/images/weixin/catrim.json',
        rendererSettings: {
          context,
        },
      })
    }).exec()
  }

  playLottie = () => {
    this.ani.play()
  }

  pauseLottie = () => {
    this.ani.pause()
  }

  render () {
    return (
      <View className='index'>
        <Button onClick={this.playSVGA}>playSVGA</Button>
        <Button onClick={this.playLottie}>playLottie</Button>
        <Button onClick={this.pauseLottie}>pauseLottie</Button>
        <Canvas id="demoCanvas" type="2d" style="width: 300px; height: 300px; background-color: black" />
        <Canvas id="demoCanvas2" type="2d" style="width: 300px; height: 300px; background-color: black" />
        <Canvas id="c1" type="2d" style="display: inline-block; width: 300px; height: 300px;" />
      </View>
    )
  }
}

export default Index
